<template>
    <div>
        <template>
            <el-button @click="btnAdd()">添加学生信息</el-button>
            <ZxDialog :visible.sync="visible" title="添加学生信息"
                    @canS="canShu(arguments)"
            ></ZxDialog>
        </template>
        <!--学生表格部分-->
        <el-table align='center' header-row-class-name="headerClass" :data="elnowdata" border style="width: 100%">
            <el-table-column align='center' prop="stuId" label="学生学号" min-width="180"></el-table-column>
            <el-table-column align='center' prop="stuName" label="学生姓名" min-width="180"></el-table-column>
            <el-table-column align='center' prop="stuSex" label="学生性别" min-width="180"></el-table-column>
            <el-table-column align='center' prop="stuAge" label="学生年龄" min-width="180"></el-table-column>
            <el-table-column align='center' prop="classId" label="班级名称" min-width="180"></el-table-column>
            <el-table-column align='center' prop="action" label="操作" min-width="180">
                <!--表格里面的删除和修改按钮-->
                <template slot-scope="scope">
                    <!--删除按钮-->
                    <el-button type="danger" @click=" handleClose(scope.row)">删除</el-button>
                    <!--修改按钮-->
                    <el-button type="text" @click="edlitData(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--表格下面的页码按钮-->
        <el-pagination :current-page="elnowPage" @current-change="elchangePage" :page-size=6
                       background layout="prev, pager, next" :total="studata.length"></el-pagination>
        <!--弹出修改框  注意  弹出框要放在根元素上面-->
        <el-dialog title="学生详细信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="学生学号" :label-width="formLabelWidth">
                    <el-input v-model="form.stuId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.stuName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄" :label-width="formLabelWidth">
                    <el-input v-model="form.stuAge" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生班级" :label-width="formLabelWidth">
                    <el-select v-model="form.className" placeholder="请选择学生的性别">
                        <el-option
                                v-for="item in classData"
                                :key="item.classId"
                                :label="item.className"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学生性别" :label-width="formLabelWidth">
                    <el-select v-model="form.stuSex" placeholder="请选择学生的性别">
                        <el-option label="女" value="女"></el-option>
                        <el-option label="男" value="男"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" :plain="true" @click="sureBtn()">确 定</el-button>
            </div>
        </el-dialog>
        <!--弹出删除框-->
        <el-dialog
                title="温馨提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <span>确定删除该学生的信息吗？</span>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="delData()">确 定</el-button>
                    </span>
        </el-dialog>
    </div>
</template>

<script>
    import * as api from '../utils/api'
    import axios from 'axios'
    import ZxDialog from "../components/ZxDialog";
    export default {
        name: "jjyClass",
        components:{
            ZxDialog
        },
        computed:{
            elnowdata(){
                let dataStart=(this.elnowPage-1)*6
                let dataEnd=dataStart+6

                this.addForm=this.studata.slice(dataStart,dataEnd)
                return this.addForm
            },

        },
        data(){
            return{
                studata:[],
                classData:[],
                elnowPage:1,
                isShow:false,
                visible:false,
                dialogFormVisible: false,
                dialogVisible: false,
                form: {},
                addForm: [],
                formLabelWidth: '120px',
            }

        },
        /*生命周期函数 里面向后端发起申请*/
        created() {
            this.axios({
                url:api.GET_STUDATA,
                method:'get',
                params:{stuId:1},
            }).then(data=>{
                this.studata=data.data.data
                /* console.log(this.studata)*/
            }).catch(err=>{

            })
        },
        methods:{
            /*  页码点击函数*/
            elchangePage(val){
                this.elnowPage=val
                /*  console.log(this.elnowPage)*/
            },
            /*获取班级的方法*/
            getClass(){
                this.axios({
                    url:api.GET_CLASSDATA,
                    method:'get',
                    params: {classId:1}
                }).then(data=>{
                    this.classData=data.data.data
                }).catch(err=>{

                })
            },
            /*修改按钮函数*/
            edlitData(item){
                this.getClass();
                this.dialogFormVisible=true;
                this.form={...item};
            },
            /*修改弹出框的  确认按钮*/
            sureBtn(item){
                this.dialogFormVisible=false;
                /* this.form=item;*/
                this.form.stuAge=parseInt(this.form.stuAge)
                this.axios({
                    url:api.POST_UPSTUDATA,
                    method:'post',
                    data:{data:this.form}
                }).then(data=>{
                    if (data.data.state.code===200){
                        this.studata=data.data.data
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                    }
                }).catch(data=>{
                })
            },
            /*添加员工上面的自定义属性*/
            canShu(e){
                this.studata=e[0]
                this.visible = false
            },
            /*添加员工按钮*/
            btnAdd() {
                this.visible = true
            },
            /*点击出现删除弹出框*/
            handleClose(item) {
                this.dialogVisible = true
                this.form=item
                /* console.log(this.form)*/
            },
            /*删除按钮函数*/
            delData(){
                this.dialogVisible = false
                console.log(123)
                axios({
                    url:api.POST_DELSTUDATA,
                    method:'post',
                    data:{stuId:this.form.stuId},
                }).then(data=>{
                    console.log(data)
                    if (data.data.state.code===200){
                        this.studata=data.data.data
                        this.$message({
                            showClose: true,
                            message: '删除成功',
                            type: 'success'
                        });
                    }
                }).catch(err=>{
                })
            },
        }

    }
</script>

<style scoped>

</style>